<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>服务商小区权限列表</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/ionicons.min.css">
		<link rel="stylesheet" href="../css/AdminLTE.min.css">
		<!--<link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
		<link rel="stylesheet" type="text/css" href="../css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/public_main.css" />-->
	</head>

	<body>
		<div class="box" id="app">
			<div class="box-header with-border">
				<h3 class="box-title">房间成员信息 </h3>
			</div>
			<div style="margin-top: 0px;" class="box-body">
				<table class="table table-bordered">
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>电话</th>
						<th>身份</th>
						<th>性别</th>
						<th>创建时间</th>
					</tr>
					<tbody id="tbbb">
						<tr v-for="(tt,index) in table_data">
							<td v-text="index+1"></td>
							<td v-text="tt.realname"></td>
							<td v-text="tt.phonenum"></td>
							<td v-text="tt.gx"></td>
							<td v-text="tt.persex"></td>
							<td v-text="tt.createdate"></td>
						</tr>
					</tbody>

				</table>
			</div>
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	//	var urlr = "http://192.168.0.30:8085"
	new Vue({
		el: '#app',
		data: {
			urltest: "",
			rommid: "",
			userId: "",
			fullname: "房间成员信息",
			table_data: "",
			tips_modal: "",
		},
		//计算属性
		computed: {

		},
		created: function() {

		},
		mounted: function() {
			var that = this;
			that.urltest = sessionStorage.getItem("urltest");
			that.userId = sessionStorage.getItem("userId");
			that.rommid = sessionStorage.getItem("rommid");
			var datainit = JSON.stringify({
				requestString: JSON.stringify({
					rommid: that.rommid
				}),
				userId: that.userId,
				fullname: that.fullname
			});
			that.room_people_info(datainit)
		},
		computed: {

		},
		methods: {
			//获取房间成员信息
			room_people_info: function(data) {
				var that = this;
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + "/verify/property/selectRoomUser",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						if(msg.responseCode == 200) {
							var data = JSON.parse(msg.returnString);
							for(var i = 0; i < data.length; i++) {
								if(data[i].persex == 1) {
									data[i].persex = '男'
								} else if(data[i].persex == 0) {
									data[i].persex = "女"
								}
								if(data[i].gx == 0) {
									data[i].gx = '业主本人'
								} else if(data[i].gx == 1) {
									data[i].gx = "家人"
								} else if(data[i].gx == 2) {
									data[i].gx = "亲友"
								} else if(data[i].gx == 3) {
									data[i].gx = "租客"
								}
							}
							that.table_data = data;
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},

		},

	})
</script>